* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html,body{
	height: 100vh;
	color: #333;
}
li{
	list-style: none;
}
a{
	text-decoration: none;
	color: #333;
}
a:hover{
	color: #333;
}
@baseFontSize: 75; //基于视觉稿横屏尺寸/100得出的基准font-size
@width: unit(690/@baseFontSize, rem);
@paddingWrap: unit(29/@baseFontSize, rem);
@marginPartTop: unit(50/@baseFontSize, rem);

.hide{
	overflow: hidden;
}
.container {
	max-width: 10rem;
	margin: auto;
	background: #f7f8fa;
	padding-bottom: 1.333333rem;
}
.container-part{
	width: @width;
	margin-left: auto;
	margin-right: auto;
}
.header{
	width: 100%;
	height: unit(100/@baseFontSize, rem);
}
.section {
	width: @width;
	margin: @marginPartTop auto;
	}
// 顶部固定导航
.header-nav {
	width: 10rem;
	height: unit(100/@baseFontSize, rem);
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 0.4rem;
	border-bottom: 1px solid #dcdcdc;
	position: fixed;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	z-index: 9;
	background: #fff;
	.left {
		width: 0.8rem;
		font-size: 0;
		img {
			width: 100%;
		}
	}
	.right {
		font-size: 0.4rem;
		.iconfont{
			font-size: 0.6rem;
			font-weight: 600;
		}
		a{
			display: block;
			line-height: 0.533333rem;
			color: #fff;
			padding: 0.133333rem 0.266666rem;
			border-radius: 0.4rem;
			background-color: #366F70;
		}
		img{
			width: 0.4rem;
		}
	}
	.menus{
		display: none;
		width: 100%;
		height: 110vh;
		background-color: rgba(54, 111, 112,.9);
		z-index: 9;
		position: absolute;
		left: 0;
		top: unit(100/@baseFontSize, rem);
	}
	.layui-nav{
		width: 100%;
		background-color: transparent;
	}
	.layui-nav-tree {
		.layui-nav-item{
			height: auto;
			line-height: 1rem;
			a{
				height: auto;
				line-height: 1rem;
			}
		}
	}
}

// 底部固定导航
.footer{
	width: 10rem;
	height: unit(110/@baseFontSize, rem);
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 0.4rem;
	border-bottom: 1px solid #dcdcdc;
	position: fixed;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	z-index: 9;
	background: #fff;
	.footer-nav{
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 0.266666rem 0;
	}
	.foot-nav-item{
		display: block;
		text-align: center;
		font-size: 0.266666rem;
		color: #979899;
	}
	.active-item{
		color: #366F70;
	}
	.image{
		width: 0.533333rem;
		height:0.533333rem;
		margin:0 auto 0.133333rem
	}
	.iconfont{
		font-size: 0.7rem;
	}
	img{
		height: 100%;
	}
}
.page-foot{
	text-align: center;
	font-size: 0.266666rem;
	line-height: 1.5;
	color: #979899;
}
// banner
.banner {
	width: @width;
	height:4rem;
	margin: @marginPartTop auto;
	position: relative;
	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 0.133333rem;
	}
	.mask{
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		border-radius: 0.133333rem;
		background: linear-gradient(transparent,rgba(0,0,0,.4));
	}
	.explain{
		width: 100%;
		color: #fff;
		text-align: center;
		position: absolute;
		top: 50%;
		left: 50%;
		transform:translateX(-50%) translateY(-50%);
	}
	.banner-title{
		font-size:0.76rem;
		line-height: 1;
		margin-bottom: 0.4rem;
		// letter-spacing: 0.133333rem;
	}
	.banner-title-small{
		font-size:0.626666rem;
		line-height: 1;
		// letter-spacing: 0.133333rem;
	}
	.banner-subtitle{
		font-size: 0.4rem;
		margin: 0.266666rem 0 0.466666rem;
		letter-spacing: 0.133333rem;
	}
	.banner-tips{
		font-size: 0.266666rem;
		line-height: 1.5;
		text-align: center;
	}
}
.gap-30{
	margin-top: unit(30/@baseFontSize,rem);
}

